<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="教室名称：">
            {{ formModel.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大楼：">
            {{ formModel.building }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼层：">
            {{ formModel.floor }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ip：">
            {{ formModel.ip }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="k4md5：">
            {{ formModel.k4MD5 }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="新k4MD5：">
            <span :style="{color: formModel.lastK4MD5 == formModel.k4MD5 ? '#303133' : 'red',}">
              {{ formModel.lastK4MD5 }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="binMD5：">
            {{ formModel.binMD5 }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="新binMD5：">
            <span class="saveright" :style="{color: formModel.lastK4MD5 == formModel.k4MD5 ? '#303133' : 'red',}">
              {{ formModel.lastBinMD5 }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">关闭</el-button>
        <!-- <el-button type="primary" @click="onSubmit()">提交</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { roleParams } from '@/apis/model/RoleModel';
import { getNewObj } from '@/utils/EsCommon';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = {
  'id': '',
  'name': '',
  'building': '',
  'floor': '',
  'floor': '',
  'ip': '',
  'roomType': '',
  'lastPingTime': '',
  'coreTime': '',
  'cardUpdateTime': '',
  'system': '',
  'k4Version': '',
  'lastK4MD5': '',
  'k4MD5': '',
  'lastBinMD5': '',
};

const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例
const formRef = ref(null);
const treeRef = ref(null);
// 表单校验规则
const formRules = ref({
  Name: [
    { required: true, message: '请填写角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度 2 - 50', trigger: 'blur' }
  ],

})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    EsAjax.post(ApiUrls.roleEdit, formModel.value).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      ElMessage.success('提交成功');
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击取消按钮
const onCancel = () => {
  // formModel.value = Object.assign({}, formAttrs);
  // formRef.value.resetFields();
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (title, item = null, width = '600px') => {
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;

  formModel.value = Object.assign({}, formAttrs)

  // 加载详情数据
  if (item) {
    formModel.value = Object.assign({ ...formAttrs }, item);
  }
}

defineExpose({
  show
})
</script>

<style scoped>
::v-deep(.el-form-item) {
  margin-bottom: 5px;
}
::v-deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.5);
}
::v-deep(.el-form-item__content) {
  color: #ffffff;
}

/* 

.saveLeft {
  width: 30%;
  float: left;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

.saveright {
  width: 65%;
  float: left;
  line-height: 30px;
  color: #ffffff;
} */
</style>
